<template>
    <div>
      <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
  <van-collapse v-model="activeName" accordion>
  <div v-for='(item, index) in list' :key="index">
  <van-cell :title="item.chname" :value="item.username" />
  </div>
  </van-collapse>
  
  </van-list>
  </div>
  </template>
  
  <script>
  import axios from 'axios';
  import { mapMutations } from 'vuex';
  export default {
    name: "ClassList_list",
    data() {
      return {
        activeName: ['1'],
        fin:0,
        list: [],
        loading: false,
        finished: false,
      };
    },
    methods: {
      onLoad() {
    // 异步更新数据，setTimeout 仅做示例，真实场景中一般为 ajax 请求
    setTimeout(() => {
      for (let i = 0; i < 100; i++) {
        this.fin += 1;
      }
  
      // 加载状态结束
      this.loading = false;
  
      // 利用Vue的watch属性监视list数组的变化
  
        if (this.fin >= this.list.length) {
          this.finished = true;
          // 执行其他相关的代码
        }
    }, 1000);
    
  },
  ...mapMutations(['setCourseId']),
      pushCourseId(){
        console.log("666"+this.list[0].course_id);
        this.setCourseId(this.list[0].course_id);
      }
    },
    mounted() {
       console.log(this.$route.params.id);
        axios.post('/class/members?classId='+this.$route.params.id)
        .then((data) =>{      
              this.list=data.data.data;
              console.log(this.list);
              this.pushCourseId();
      },)
      .catch((error) => {
        console.log(error);
      });
      },

      
   
  };
  
  </script>
  
  <style scoped>
  .blue-text {  
    color: skyblue;  
  }  
    
  .red-text {  
    color: rgb(116, 193, 0);  
  }
  </style>